<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<meta charset="utf-8">
<title>ChinaZ</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/zerogrid.css">
<link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/flexslider.css" type="text/css"
	media="screen" />
	<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet"
type="text/css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/page.css">
<link rel="stylesheet" href="css/bootstrap.min.css">

<!--[if lt IE 8]>
       <div style=' clear: both; text-align:center; position: relative;'>
         <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
           <img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
        </a>
      </div>
    <![endif]-->
<!--[if lt IE 9]>
		<script src="js/html5.js"></script>
		<script src="js/css3-mediaqueries.js"></script>
	<![endif]-->

</head>
<body>
	<div class="wrap-body">
		<!--////////////////////////////////////Header-->
		<header class="home-header">
			<div class="zerogrid">
				<div class="logo"><div><img src="images/foodLogo.jpg" /></div></div>
				<div class="logo-title">智能点餐系统</div>
			</div>
		</header>
		<!--//////////////////////////////////////Menu-->
		<a href="#" class="nav-toggle">Toggle Navigation</a>
		<nav class="cmn-tile-nav">
			<ul class="clearfix">
				<li class="colour-1"><a href="index.jsp">首页</a></li>
				<li class="colour-2"><a href="gallery.jsp">下午茶</a></li>
				<li class="colour-7"><a href="staff.jsp">鲜果购</a></li>
				<li class="colour-5"><a href="reservation.jsp">精选小吃</a></li>
				<li class="colour-4"><a href="archive.jsp">超市</a></li>
				<li class="colour-6"><a href="news.jsp">精选介绍</a></li>
				<li class="colour-8"><a href="menu.jsp">购物车</a></li>
				<li class="colour-7"><a href="login.jsp">登录</a></li>
				<li class="colour-2"><a href="manager.jsp">用户管理</a></li>
				<li class="colour-1"><a href="order.jsp">查看订单</a></li>
			</ul>
		</nav>

		<!--////////////////////////////////////Container-->
		<section id="container" class="sub-page">
			<div class="wrap-container zerogrid">
				<div class="crumbs">
					<ul>
						<li><a href="index.jsp">首页</a></li>
						<li><a href="javascript:viod(0)">查看订单</a></li>
					</ul>
				</div>
				<div class="btn-toolbar">
					<div class="search">
						<div class="clearfix"></div>
						<div class="search d1">
							<form style="margin-left:50px">
								<input type="text" id="content" placeholder="搜索订单" name="content">
								<button type="button" id="search"></button>
							</form>
						</div>
						<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#createModal" data-whatever="@mdo" style="margin-left: 50px;">创建订单</button>
					</div>
					<div class="btn-group"></div>
				</div>
				<div id="main-content" style="margin-top:10px">
					<div class="wrap-content">
						<div class="panel panel-default">
							<!-- Default panel contents -->
							<div class="panel-heading">订单列表</div>
							<table class="table">
								<thead>
									<tr>
										<th>序列</th>
										<th>订单编号</th>
										<th>商品名称</th>
										<th>商品价格</th>
										<th>实付款</th>
										<th>付款人</th>
										<th>收货人</th>
										<th>联系电话</th>
										<th>状态</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody id="article-wrap">
								<!-- <div class="Article-wrap" id="article-wrap"></div> -->
								</tbody>
							</table>
						</div>
						<div class="pages" id="pager"></div>
					</div>
				</div>
			</div>
		</section>
		<footer class="zerogrid">
			<div class="wrap-footer">
				<div class="row">
					<div class="col-1-3">
						<div class="wrap-col">
						</div>
					</div>
					<div class="col-1-3">
					<div class="wrap-col">
						<h4>联系客服</h4>
						<p>0594-1234567</p>
						<p>周一至周日 9:00-23:00</p>
						<p>客服不受理商务合作</p>
					</div>
					</div>
				</div>
			</div>
			<div class="copyright">
				<div class="wrapper">
					<a target="_blank" href="#"></a>
					<ul class="quick-link f-right">
					</ul>
				</div>
			</div>
		</footer>
	</div>
	<!-- 创建订单弹窗 -->
	<div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
							aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="exampleModalLabel">创建订单</h4>
				</div>
				<div class="modal-body">
					<form>
						<div class="form-group">
							<label for="recipient-name" class="control-label">商品名称:</label>
							<input type="text" class="form-control" id="recipient-name">
						</div>
						<div class="form-group">
							<label for="message-text" class="control-label">商品价格:</label>
							<input type="text" class="form-control" id="message-text">
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" id="createSubmit">确定</button>
				</div>
			</div>
		</div>
	</div>
	<!-- 修改订单弹窗 -->
	<div class="modal fade" id="modifyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
							aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="modifyModalLabel">修改订单</h4>
				</div>
				<div class="modal-body">
					<form>
						<div class="form-group">
							<label for="modify-recipient-name" class="control-label">商品名称:</label>
							<input type="text" class="form-control" id="modify-recipient-name" value="订单1" readonly>
						</div>
						<div class="form-group">
							<label for="modify-price" class="control-label">商品价格:</label>
							<input type="text" class="form-control" id="modify-price" value="20">
						</div>
						<div class="form-group">
							<label for="modify-pay" class="control-label">实付款:</label>
							<input type="text" class="form-control" id="modify-pay" value="20">
						</div>
						<div class="form-group">
							<label for="modify-pay-person" class="control-label">付款人:</label>
							<input type="text" class="form-control" id="modify-pay-person" value="高哥哥">
						</div>
						<div class="form-group">
							<label for="modify-receive" class="control-label">收货人:</label>
							<input type="text" class="form-control" id="modify-receive" value="高哥哥">
						</div>
						<div class="form-group">
							<label for="modify-mobile" class="control-label">联系电话:</label>
							<input type="text" class="form-control" id="modify-mobile" value="20">
						</div>
						<div class="form-group">
							<label for="modify-state" class="control-label">状态:</label>
							<select name="" id="modify-state" style="width: 70px;height: 24px;border: 1px solid #ccc;box-shadow: inset 0 1px 1px rgba(0,0,0,.075);">
								<option value="">待付款</option>
								<option value="">待收货</option>
								<option value="">已完成</option>
							</select>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" id="modifySubmit">确定</button>
				</div>
			</div>
		</div>
	</div>
	<!-- 删除订单弹窗 -->
	<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
		<div class="modal-dialog modal-sm" role="document">
			<div class="modal-content">
				<div class="modal-body">确定删除该订单？</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" id="deleteSubmit">确定</button>
				</div>
			</div>
		</div>
	</div>
</body>
<script src="js/bootstrap.min.js"></script>
<script>
	// 创建订单确定
	$("#createSubmit").click(function () {
        $("#createModal").modal('hide')
    })
	// 修改订单确定
    $("#modifySubmit").click(function () {
        $("#modifyModal").modal('hide')
    })
	// 删除订单
	$("#deleteSubmit").click(function () {
        $(".bs-example-modal-sm").modal('hide')
    })
	//实现分页
	var currentPage = 1; // 当前页码, 从1开始
	var pageSize = 5; // 每页显示记录数
	var maxButtons = 10; // 显示的分页按钮数量
	var totalNumber = 30; // 记录总数
	var totalPage = parseInt(Math.ceil(totalNumber / pageSize)); // 总页数
	initPage();

	function initPage() {
		//循环生成数组
		var arr = [];
		for(var o = 1; o <=totalNumber; o++) {
			arr.push('<tr><th>'+o+'</th><th>001</th><th>订单1</th><th>200</th><th>200</th><th>高哥哥</th><th>高哥哥</th><th>13328202442</th><th>待收货</th><th><button type="button" class="btn btn-success" data-toggle="modal" data-target="#modifyModal" data-whatever="@mdo" style="margin-left: 50px;">修改</button><button type="button" class="btn btn-danger delete" data-toggle="modal" data-target=".bs-example-modal-sm">删除</button></th></tr>');
		}
		//每一页第一个li
		var rangeStartitem = (currentPage - 1) * pageSize;
		//开始页
		var rangeStart = Math.max(1, currentPage - parseInt(maxButtons / 2));
		//最后一页
		var rangeEnd = Math.min(totalPage, rangeStart + maxButtons - 1);

		var constr = pageCon(arr, rangeStartitem, pageSize);

		var divcontent = document.getElementById("article-wrap");
		divcontent.innerHTML = constr;

		//创建分页模板
		var str = "";
		str += "<div class='pagination'>";
		//如果总页数大于1
		if(totalPage > 1) {
			//当前页不是第一页
			if(currentPage != 1) {
				str += '<a href="#!"  data-num="1"><span>首页</span></a>';
				str += '<a href="#!"  data-num="' + (currentPage - 1) + '"><span>上一页</span></a>';
			} else {
				//如果是第一页，禁用上一页按钮
				str += '<span>首页</span>';
				str += '<span>上一页</span>';
			}
			//中间页码
			for(var i = rangeStart; i <= rangeEnd; i++) {
				//如果是当前页的话，就禁用当前页的按钮
				if(i == currentPage) {
					str += '<span class="on">' + i + "</span>";
				} else {
					//否则就可以点击该页
					str += '<a href="#"  data-num="' + i + '"><span>' + i + "</span></a>";
				}
			}
			//当前页不是总页，即是最后一页
			if(currentPage != totalPage) {
				str += '<a href="#"  data-num="' + (parseInt(currentPage) + 1) + '"><span>下一页</span></a>';
				str += '<a href="#"  data-num="' + totalPage + '"><span>末页</span></a>';
			} else {
				//如果是最后页，禁用下一页
				str += '<span>下一页</span>';
				str += '<span>末页</span>';
			}
		}

		str += ' 一共' + totalPage + '页, ' + totalNumber + '条记录 </div>';

		var divpager = document.getElementById("pager");
		divpager.innerHTML = str;
		//获取所有生成的页面链接
		var listTag = divpager.getElementsByTagName('a');
		//绑定li事件
		for(var i = 0; i < listTag.length; i++) {
			listTag[i].onclick = function() {
				var currentPage = this.getAttribute('data-num');
				nowcurrentPage(currentPage);
				return false;
			};
		}
	}
	//传递页面
	function nowcurrentPage(currentPage) {
		this.currentPage = currentPage;
		initPage();
	}

	//生成每页的数据
	function pageCon(arr, rangeStartitem, len) {
		var constr = '';
		for(var i = rangeStartitem; i < rangeStartitem + len; i++) {
			constr += arr[i];
		}
		return constr;
	}
</script>
<style type="text/css">
#nav {  
    height: 40px;  
    background-color: #efeff0;
    margin-left: -16px;
    margin-right: -16px;
}  
  
#nav ul {  
    list-style: none;  
}  
  
#nav li {  
    display: inline;  
    line-height: 40px; 
    color: #000;  
}  
  
#nav a {  
    color: #000;  
    text-decoration: none;  
    padding: 20px 20px;  
}  

</style>

</html>